<!-- head - 开始 -->
<? require(dirname(dirname(__FILE__)).'/public/head.html'); ?>
<!-- head - 结束 -->

</head>
<? require(dirname(dirname(__FILE__)).'/public/body.html'); ?>
    <div class="wrapper" id="auth-rule">
        
        <!-- 侧边栏 - 开始 -->
        <i-left-side></i-left-side>
        <!-- 侧边栏 - 结束 -->
        
        <div class="content-page">
            
            <div class="content">
                
                <!-- 顶部导航 - 开始 -->
                <i-top-nav></i-top-nav>
                <!-- 顶部导航 - 结束 -->
                
                <!-- 内容 - 开始 -->
                <div class="container-fluid">
                    
                    <!-- 页面标题 开始 -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <form class="form-inline">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <input type="text" class="form-control form-control-light" id="dash-daterange">
                                                <div class="input-group-append">
                                                    <span class="input-group-text bg-primary border-primary text-white">
                                                        <i class="mdi mdi-calendar-range font-13"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="/index/options" class="btn btn-primary ml-2">
                                            <i class="mdi mdi-autorenew"></i>
                                        </a>
                                    </form>
                                </div>
                                <h4 class="page-title">&nbsp;</h4>
                            </div>
                        </div>
                    </div>
                    <!-- 页面标题 结束 -->
                    
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    
                                    <div class="row pb-2">
                                        <div class="com-md-6">
                                            <div class="card-body pt-0 pb-0">
                                                <div class="app-search d-block">
                                                    <div class="input-group">
                                                        <input v-model="search_value" v-on:keyup.enter.native="getData('','',true)" type="text" class="form-control" placeholder="用户名/帐号/邮箱" data-toggle="tooltip" data-original-title="支持模糊查询（如查询QQ邮箱用户：@qq.com）">
                                                        <span class="mdi mdi-magnify"></span>
                                                        <div class="input-group-append">
                                                            <button v-on:click="getData('','',true)" class="btn btn-primary" type="button">搜索</button>
                                                        </div>
                                                        <button v-on:click="edit = {}" data-toggle="modal" data-target="#fill-add-rule-modal" type="button" class="btn btn-primary d-none d-lg-block ml-2">添加规则</button>
                                                        <button v-on:click="deleteUsers()" type="button" class="btn btn-primary d-none d-lg-block ml-2">批量删除</button>
                                                        <a v-on:click="edit = {}" data-toggle="modal" data-target="#fill-add-rule-modal" href="#" class="btn btn-primary d-lg-none d-block ml-1">
                                                            <i class="mdi mdi-plus-circle"></i>
                                                        </a>
                                                        <a v-on:click="deleteUsers" href="#" class="btn btn-primary d-lg-none d-block ml-1">
                                                            <svg t="1603942959679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5903" width="14" height="14"><path d="M973.312 187.904h-172.544V121.856c0-60.928-49.664-111.104-110.592-111.616H334.336c-61.44 0-111.616 50.176-111.616 111.616v66.048H50.688c-22.528 0-40.448 18.432-40.448 40.448 0 22.528 18.432 40.448 40.448 40.448H972.8c22.528 0 40.448-18.432 40.448-40.448 0.512-22.528-17.92-40.448-39.936-40.448zM304.128 121.856c0-16.896 13.824-30.208 30.208-30.208h355.328c16.384 0 29.696 13.312 29.696 29.696v66.56H304.128V121.856zM831.488 330.752c-22.528 0-40.448 18.432-40.448 40.448v531.456c0 16.896-13.824 30.208-30.208 30.208h-496.64c-16.896 0-30.208-13.824-30.208-30.208v-532.48c0-22.528-18.432-40.448-40.448-40.448-22.528 0-40.448 18.432-40.448 40.448v531.968c0 61.44 50.176 111.616 111.616 111.616h496.64c61.44 0 111.616-50.176 111.616-111.616V371.2c-1.024-22.528-19.456-40.448-41.472-40.448z" fill="#fff" p-id="5904" data-spm-anchor-id="a313x.7781069.0.i11" class=""></path><path d="M405.504 532.992c-22.528 0-40.448 18.432-40.448 40.448v202.24c0 18.432 12.8 34.304 29.696 38.912l-1.536 1.536h17.408v-0.512c19.968-2.56 35.328-19.456 35.328-39.936V573.44c0-22.016-17.92-40.448-40.448-40.448zM405.504 329.728c-22.528 0-40.448 18.432-40.448 40.448v88.064c0 18.432 12.8 34.304 29.696 38.912l-1.536 1.536h17.408v-0.512c19.968-2.56 35.328-19.456 35.328-39.936V370.176c0-22.016-17.92-40.448-40.448-40.448zM623.616 329.728l-17.408-0.512 1.536 1.536c-16.896 4.608-29.696 20.48-29.696 38.912v202.24c0 22.528 18.432 40.448 40.448 40.448s40.448-18.432 40.448-40.448V370.176c0-20.48-15.36-37.376-35.328-40.448zM623.616 647.168l-17.408-0.512 1.536 1.536c-16.896 4.608-29.696 20.48-29.696 38.912v88.064c0 22.528 18.432 40.448 40.448 40.448s40.448-18.432 40.448-40.448v-88.576c0-19.968-15.36-36.864-35.328-39.424z" fill="#fff" p-id="5905" data-spm-anchor-id="a313x.7781069.0.i12" class="selected"></path></svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 加载动画 开始 -->
                                    <div v-if="is_load" class="table-responsive is_load mb-2">
                                        <div class="spinner-border text-primary m-1" role="status"></div>
                                        <div>加载中...</div>
                                    </div>
                                    <!-- 加载动画 结束 -->
                                    
                                    <div v-else-if="!is_load" class="table-responsive-sm">
                                        <table id="table" class="table table-centered mb-0"></table>
                                    </div>
                                    
                                    <!-- v-else-if="!is_load" -->
                                    <div v-if="false" class="table-responsive-sm">
                                        <table class="table table-centered mb-0">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div class="custom-control custom-checkbox">
                                                            <input v-on:click="selectAll" type="checkbox" class="custom-control-input" id="select-all">
                                                            <label class="custom-control-label" for="select-all"></label>
                                                        </div>
                                                    </th>
                                                    <th>标题</th>
                                                    <th>路由</th>
                                                    <th>帐号</th>
                                                    <th>邮箱</th>
                                                    <th>电话</th>
                                                    <th>权限</th>
                                                    <th>上次登录</th>
                                                    <th>启用</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="custom-control custom-checkbox">
                                                            <input name="data.id" type="checkbox" class="custom-control-input checkbox-item" id="'select-' + data.id">
                                                            <label class="custom-control-label" for="'select-' + data.id"></label>
                                                        </div>
                                                    </td>
                                                    <td class="table-user pointer">
                                                        test
                                                    </td>
                                                    <td>test</td>
                                                    <td>test</td>
                                                    <td>test</td>
                                                    <td>test</td>
                                                    <td><span class="badge badge-primary">test</span></td>
                                                    <td>test</td>
                                                    <td>
                                                        <div>
                                                            <input id="'enable-' + data.id" type="checkbox" data-switch="success">
                                                            <label for="'enable-' + data.id" data-on-label="Yes" data-off-label="No" class="mb-0 d-block"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <a data-toggle="modal" data-target="#fill-add-rule-modal" type="button" class="btn btn-outline-info btn-sm mr-1">
                                                            <svg t="1603942550558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3087" width="14" height="14">
                                                                <path d="M906.116912 36.819799l6.357068 5.84509 66.685222 65.789259a134.778384 134.778384 0 0 1 6.826382 185.592267l-6.101079 6.399733L299.038207 998.187742a85.329778 85.329778 0 0 1-53.459106 25.385609L237.984751 1023.957335H43.304862a42.664889 42.664889 0 0 1-42.366234-37.545102l-0.298655-4.991792-0.554643-178.168576a85.329778 85.329778 0 0 1 19.711178-54.781718l5.034457-5.546435L719.202033 42.664889a138.063581 138.063581 0 0 1 186.914879-5.84509zM981.292446 938.627557a42.664889 42.664889 0 0 1 0 85.329778h-511.978667a42.664889 42.664889 0 1 1 0-85.329778h511.978667zM86.3964 786.783217l-4.735803 4.735803L84.433815 938.627557h153.508271l0.08533-0.213324-151.631016-151.631016zM676.32382 204.791467L147.151202 726.796383l150.521728 150.521729L818.440565 343.665681 676.32382 204.791467zM981.249781 767.968001a42.664889 42.664889 0 0 1 0 85.329778h-255.989334a42.664889 42.664889 0 1 1 0-85.329778h255.989334zM783.626016 99.494521l-4.607808 4.0105-41.939586 41.342277 140.922128 137.764926 41.512937-42.494229c6.783717-6.613058 11.43419-15.018041 13.567435-24.148327l0.938627-5.546436 0.341319-5.631765c0-11.391525-3.92517-22.399067-11.092871-31.230699l-3.882505-4.266489-66.727886-65.789258-4.181159-3.669181a52.733803 52.733803 0 0 0-64.850631-0.341319z" fill="#008df0" p-id="3088">
                                                                </path>
                                                            </svg>
                                                        </a>
                                                        <a type="button" class="btn btn-outline-danger btn-sm">
                                                            <svg t="1603942959679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5903" width="14" height="14">
                                                                <path d="M973.312 187.904h-172.544V121.856c0-60.928-49.664-111.104-110.592-111.616H334.336c-61.44 0-111.616 50.176-111.616 111.616v66.048H50.688c-22.528 0-40.448 18.432-40.448 40.448 0 22.528 18.432 40.448 40.448 40.448H972.8c22.528 0 40.448-18.432 40.448-40.448 0.512-22.528-17.92-40.448-39.936-40.448zM304.128 121.856c0-16.896 13.824-30.208 30.208-30.208h355.328c16.384 0 29.696 13.312 29.696 29.696v66.56H304.128V121.856zM831.488 330.752c-22.528 0-40.448 18.432-40.448 40.448v531.456c0 16.896-13.824 30.208-30.208 30.208h-496.64c-16.896 0-30.208-13.824-30.208-30.208v-532.48c0-22.528-18.432-40.448-40.448-40.448-22.528 0-40.448 18.432-40.448 40.448v531.968c0 61.44 50.176 111.616 111.616 111.616h496.64c61.44 0 111.616-50.176 111.616-111.616V371.2c-1.024-22.528-19.456-40.448-41.472-40.448z" fill="#d81e06" p-id="5904" data-spm-anchor-id="a313x.7781069.0.i11" class="">
                                                                </path>
                                                                <path d="M405.504 532.992c-22.528 0-40.448 18.432-40.448 40.448v202.24c0 18.432 12.8 34.304 29.696 38.912l-1.536 1.536h17.408v-0.512c19.968-2.56 35.328-19.456 35.328-39.936V573.44c0-22.016-17.92-40.448-40.448-40.448zM405.504 329.728c-22.528 0-40.448 18.432-40.448 40.448v88.064c0 18.432 12.8 34.304 29.696 38.912l-1.536 1.536h17.408v-0.512c19.968-2.56 35.328-19.456 35.328-39.936V370.176c0-22.016-17.92-40.448-40.448-40.448zM623.616 329.728l-17.408-0.512 1.536 1.536c-16.896 4.608-29.696 20.48-29.696 38.912v202.24c0 22.528 18.432 40.448 40.448 40.448s40.448-18.432 40.448-40.448V370.176c0-20.48-15.36-37.376-35.328-40.448zM623.616 647.168l-17.408-0.512 1.536 1.536c-16.896 4.608-29.696 20.48-29.696 38.912v88.064c0 22.528 18.432 40.448 40.448 40.448s40.448-18.432 40.448-40.448v-88.576c0-19.968-15.36-36.864-35.328-39.424z" fill="#d4237a" p-id="5905" data-spm-anchor-id="a313x.7781069.0.i12" class="selected">
                                                                </path>
                                                            </svg>
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    
                                    <!-- 加载动画 v-if="page_is_load" 开始 -->
                                    <div v-if="false" class="btn-group mb-2" style="float: right">
                                        <button class="btn btn-light" type="button" disabled="">
                                            <span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span>
                                            加载中...
                                        </button>
                                    </div>
                                    <!-- 加载动画 结束 -->
                                    
                                    <!-- v-else-if="!page_is_load && is_page_show" -->
                                    <div v-if="false" class="btn-group mt-2" style="float: right">
                                        <button type="button" class="btn btn-light" v-on:click="getData('',1)">首页</button>
                                        <button v-for="(item, index) in page_list" :key="index" v-on:click="getData('',item)" class="btn btn-light">{{item}}</button>
                                        <button type="button" class="btn btn-light" v-on:click="getData('',users.page)">末页</button>
                                        <div class="btn-group">
                                            <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">其他</button>
                                            <div class="dropdown-menu dropdown-menu-animated">
                                                <a class="dropdown-item" href="#" v-on:click="getData('',page-1)">上一页</a>
                                                <a class="dropdown-item" href="#" v-on:click="getData('',page+1)">下一页</a>
                                                <a class="dropdown-item" href="#">共 {{users.page}} 页</a>
                                                <a class="dropdown-item" href="#">共 {{users.count}} 条数据</a>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 添加规则 - 结束 -->
                    <div id="fill-add-rule-modal" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="fill-primary-modalLabel" aria-hidden="true">
                        <!-- modal-dialog-centered -->
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content modal-filled bg-primary">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="fill-primary-modalLabel">{{title}}</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                </div>
                                <div class="modal-body">
                                    <p>权限规则主要是根据强制路由模式实现的，因此，这里的规则遵循TP6路由规范。</p>
                                    <div class="row">
                                        <div class="card-body">

                                            <ul class="nav nav-tabs nav-bordered mb-3">
                                                <li class="nav-item">
                                                    <a href="#home-b1" data-toggle="tab" aria-expanded="false" class="nav-link active">
                                                        <i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i>
                                                        <span class="d-none d-lg-block text-white">简单</span>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a href="#profile-b1" data-toggle="tab" aria-expanded="true" class="nav-link">
                                                        <i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i>
                                                        <span class="d-none d-lg-block text-white">高级</span>
                                                    </a>
                                                </li>
                                            </ul>
    
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="home-b1">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group row mb-3">
                                                                <label class="col-3 col-form-label">名称</label>
                                                                <div class="col-9">
                                                                    <input v-model="edit.title" type="text" class="form-control" placeholder>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group row mb-3">
                                                                <label class="col-3 col-form-label">归属</label>
                                                                <div class="col-9">
                                                                    <select id="attri-select2" class="form-control select2" data-toggle="select2"></select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group row mb-3">
                                                                <label class="col-3 col-form-label">控制器</label>
                                                                <div class="col-9">
                                                                    <select id="controller-select2" class="form-control select2" data-toggle="select2"></select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                                <div class="form-group row mb-3">
                                                                    <label class="col-3 col-form-label">方法</label>
                                                                    <div class="col-9">
                                                                        <select id="methods-select2" class="form-control select2" data-toggle="select2"></select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane show" id="profile-b1">
                                                    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
                                                    <p class="mb-0">Leggings occaecat dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                                                </div>
                                            </div>
    
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline-light" data-dismiss="modal">关闭</button>
                                    <button v-on:click="save" type="button" class="btn btn-light">保存配置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 添加规则 - 结束 -->
                    
                </div>
                <!-- 内容 - 结束 -->
                
            </div>
            
            <!-- 页脚 - 开始 -->
            <i-footer></i-footer>
            <!-- 页脚 - 结束 -->
        </div>
        
        <!-- 右侧边栏 - 开始 -->
        <i-right-side></i-right-side>
        <!-- 右侧边栏 - 结束 -->
    </div>
    
    <!-- bootstrap tabletree - 依赖开始 -->
    <script src="<?= __ADMIN_LIBS__.'jquery-3.5.1.min.js'; ?>"></script>
    <script src="<?= __ADMIN_JS__.'vendor/bootstrap-table.min.js'; ?>"></script>
    <script src="<?= __ADMIN_JS__.'vendor/bootstrap-table-treegrid.js'; ?>"></script>
    <script src="<?= __ADMIN_JS__.'vendor/jquery.treegrid.min.js'; ?>"></script>
    <!-- bootstrap tabletree - 依赖结束 -->
    
    <script src="<?= __ADMIN_JS__.'vue/auth-rule.js?v='.__VERSION__; ?>"></script>
    
    <!-- 依赖 - 开始 -->
    <? require(dirname(dirname(__FILE__)).'/public/script.html'); ?>
    <!-- 依赖 - 结束 -->
    
    <!-- APP JS - 开始 -->
    <!-- APP JS - 结束 -->
    
    <!-- footer - 开始 -->
    <? require(dirname(dirname(__FILE__)).'/public/footer.html'); ?>
    <!-- footer - 结束 -->